<template>
  <el-col :span="12" :offset="4" class="nav">
    <el-menu :default-active="activeIndex" class="el-menu-demo"
             mode="horizontal" @select="handleSelect"
             background-color="#ffffff" :router="routerModule">
      <el-menu-item v-for="(item,index) in navList" :key="index" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<script>
    export default {
        name: "Nav",
        data(){
          return {
            activeIndex: '',
            routerModule:true,
            navList:[
              {name:'/homePage',navItem:'首页'},
              {name:'/videoAndArticle',navItem:'视频文章'},
              {name:'/community',navItem:'社区'},
              {name:'/catering',navItem:'配餐'},
              {name:'/store',navItem:'商城'},
            ]
          }
        },
        methods: {
        handleSelect(key, keyPath) {
        },
        handleActive(path){
          switch (path) {
            case "/videoAndArticleDetails":return path;break;
            case "/communityDetails":return '/community';break;
            case "/communityRelease":return '/community';break;
          }
          return path;
        }
      },
      mounted() {
        this.activeIndex=this.handleActive(this.$route.path);
      }
    }
</script>

<style scoped lang="stylus">
.nav
  height 70px
  .el-menu
    background-color #000D10 !important
    border-bottom none
    .el-menu-item
      color #fff
      background-color #000D10 !important
      transition background-color 0.6s
      height 69px
      width 120px
      text-align center
      border-bottom none
      box-sizing border-box
      padding-top 5px
      &:hover
        background-color #00CF7A !important
    .is-active
      background-color #00CF7A !important
</style>
